<template>
    <view class="userIndex">
        <u-modal :show="mshow" @confirm="mconfirm" title="提示" :content='mcontent'></u-modal>

        <view class="bg">
            <view class="vh-cb">
                <view class="vh-cs">
                    <view class="userImg" @click="gotoeditInfo()">
                        <image class="user_img"
                            :src="userInfoDet.avatar ? userInfoDet.avatar : '../../static/icon/WeChatIcon.png'"></image>
                        <image class="editUser_img" v-if="userInfo.roleName == '水工角色'" src="../../static/imgs/editUser.png"
                            mode="aspectFit"></image>
                    </view>
                    <!-- <view class="name"  @click="getphonenumber()">{{userInfoBase?'点此获取手机号':'点此登录/注册'}}</view> -->
                    <!-- <button open-type="getPhoneNumber" @getphonenumber="getphonenumber">点此登录/注册 </button> -->
                    <!-- <button class="name" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">点此登录/注册</button> -->

                    <view class="name" @click="tologin">
                        {{ userInfoDet.userName ? userInfoDet.userName : userInfo.roleId ? userInfo.userName ? userInfo.userName
                            : userInfo.roleName : '点此登录/注册' }}
                        <!-- {{userInfo.roleId ? userInfo.userName ? userInfo.userName :userInfo.roleName:'点此登录/注册'}} -->
                        <button class="phoneBtn" v-if="!userInfo.roleId" @getphonenumber="getPhoneNum"
                            open-type="getPhoneNumber">
                            点此登录
                        </button>
                    </view>
                </view>
                <view class="service" @click="gotoService()">
                    <view class="vh-c">
                        <image src="../../static/imgs/service.png" mode="aspectFit"></image>
                    </view>
                    <view>客服中心</view>
                </view>

                <!-- {{userInfo.roleId}} -->
                <image class="rz_img" v-if="userInfo.identityType == '2'" src="../../static/imgs/rzhy.png" mode="aspectFit">
                </image>

                <view v-if="userInfo.roleName" class="logOut" @click="logOut">
                    退出登录
                </view>

            </view>
            <view class="vh-c">
                <view class="amount" v-if="userInfo.roleName == '水工角色'" @click="gotoshopIncome()">
                    <view>{{ jine.tixian ? jine.tixian : '---' }}</view>
                    <view>可提现金额</view>
                </view>
                <view class="amount" v-if="userInfo.roleName == '商家角色'">
                    <view>{{ jine.hexiao ? jine.hexiao : '---' }}</view>
                    <view>已核销金额</view>
                </view>
                <view class="amount" v-if="userInfo.roleName == '商家角色'" @click="gotoshopIncome()">
                    <view>{{ jine.daihexiao ? jine.daihexiao : '---' }}</view>
                    <view>待核销金额</view>
                </view>
                
            </view>

            <image v-if="userInfo.roleName != '水工角色' && userInfo.roleName != '商家角色'" class="rzjs_img"
                src="../../static/imgs/rzjs.png" @click="gotoRenzheng('0')"></image>
            <!-- 支付 -->
            <!-- <image v-if="userInfo.identityType=='1'" class="rzjs_img" src="../../static/imgs/rzjs.png"
             :style="{marginTop:(userInfo.identityType=='1' ? '0rpx':'6vh')}"
                @click="gotoRenzheng('pay')"></image>
            <view v-if="userInfo.roleName=='游客角色'||!userInfo.roleName" class="rzjs_img vh-c">
                <image src="../../static/imgs/sm.png" @click="gotoRenzheng('0')"></image>
                <image src="../../static/imgs/hy.png" @click="gotoRenzheng('1')"></image>
            </view> -->

        </view>

        <view class="bottomBox">

            <view class="promoteBox">
                <view class="promoteBoxtop">
                    <view class="vh-cs searchBox" style="margin-bottom:20rpx">
                        {{ userInfo ? userInfo.roleName == '商家角色' ? '核销记录' : '推广记录' : '推广记录' }}
                        <view class="vh-cs" @click="chaxun()"
                            v-if="userInfo ? userInfo.roleName == '水工角色' && srhx == 0 && sjList.length ? true : false : false">
                            <image src="../../static/imgs/promoteSearch.png" mode="aspectFit"></image>
                            <text>查询</text>
                        </view>
                    </view>
                    <u-tabs v-if="userInfo ? userInfo.roleName == '水工角色' : false"
                        :activeStyle="{ color: '#004EE8', fontWeight: 'bold', transform: 'scale(1.05)' }"
                        :inactiveStyle="{ color: '#666', transform: 'scale(1)' }" :list="promotetypeList" lineWidth="30"
                        @click="clicktype()"></u-tabs>
                </view>

                <view class="u-page">
                    <view style="padding:40rpx;" class="vh-c" v-if="recordList.length == 0">
                        <image src="../../static/imgs/nodata.png" mode="aspectFit"></image>
                    </view>

                    <u-list @scrolltolower="scrolltolower" :preLoadScreen='preLoadScreen * 2.5'>

                        <view class="uListBox">
                            <u-list-item v-for="(item, index) in recordList" :key="index">
                                <!-- <u-cell :title="`列表长度-${index + 1}`">
                                <u-avatar slot="icon" shape="square" size="35" :src="item.url" customStyle="margin: -3px 5px -3px 0"></u-avatar>
                            </u-cell> -->
                                <!-- @click="seeQrCodeImg(item)" -->
                                <view class="recordItem" @click="seeQrCodeImg(item)">
                                    <view class="dptitle">{{ item.machName }}
                                        <span v-if="item.type == '1'" style="color:#FF8000">已核销</span>
                                        <span v-if="item.type == '2'" style="color:#FF0000">已退货</span>

                                        <!-- <span v-if="item.type==2">0-核销 1-退货 2-未处理</span> -->
                                    </view>
                                    <view class="vh-cb">
                                        <view class="title">
                                            {{ item.goodsName }}
                                        </view>
                                        <view class="moneyBox vh-c">
                                            <image src="../../static/imgs/money.png" mode="aspectFit"></image>
                                            <text
                                                :style="{ color: (srhx == 1 || userInfo.roleName == '商家角色' ? '#FF0000' : '#ff9f16') }">
                                                {{ srhx == 1 || userInfo.roleName == '商家角色' ? '-' : '+' }}{{ item.jine }}</text>
                                        </view>
                                    </view>
                                    <view class="time">
                                        {{ item.time }}
                                    </view>
                                </view>
                            </u-list-item>
                            <!-- <u-loadmore :status="status" :fontSize="30" /> -->

                        </view>
                    </u-list>
                </view>
            </view>
        </view>
        <u-popup :show="Sshow" mode="bottom" @close="close" @open="open">
            <view>
                <u--form :model="searchFrom" ref="uForm">

                    <u-form-item label="起始时间" borderBottom @click="showTimePick = true; hideKeyboard('startTime')"
                        ref="item1">
                        <u--input v-model="searchFrom.startTime" disabled disabledColor="#ffffff" placeholder="请选择起始时间"
                            border="none"></u--input>
                        <u-icon slot="right" name="arrow-right"></u-icon>
                    </u-form-item>

                    <u-form-item label="结束时间" borderBottom @click="showTimePick = true; hideKeyboard('endTime')"
                        ref="item1">
                        <u--input v-model="searchFrom.endTime" disabled disabledColor="#ffffff" placeholder="请选择起始时间"
                            border="none"></u--input>
                        <u-icon slot="right" name="arrow-right"></u-icon>
                    </u-form-item>

                    <u-form-item label="选择商家" @click="showdizhi = true">
                        <u--input v-model="searchFrom.machName" :disabled="true" />
                        <u-icon slot="right" name="arrow-right"></u-icon>
                    </u-form-item>
                </u--form>
                <u-button type="primary" @click="gettuiguangjilu(srhx + 1)">提交</u-button>
                <view style="padding-top:20rpx !important;">

                    <u-button class="buttonbottom" @click="chongzhiSearch()">重置</u-button>
                </view>

            </view>
        </u-popup>
        <u-popup :show="showscanImg" mode="center" @close="close" @open="open">
            <!-- <img class="qrCodeImg" :src="qrCodeImg" alt=""> -->
            <u-qrcode ref="qr" canvas-id="qr" :value="qrCodeImg" :size="300"></u-qrcode>

        </u-popup>

        <u-picker :show="showdizhi" ref="uPicker" keyName="name" :columns="sjList" @confirm="confirmSJ"
            @cancel="showdizhi = false" @change="changeHandlerSJ">
        </u-picker>

        <u-datetime-picker :show="showTimePick" :value="birthday" mode="date" closeOnClickOverlay @confirm="birthdayConfirm"
            @cancel="birthdayClose" @close="birthdayClose"></u-datetime-picker>
        <z-navigation style="position: absolute;"></z-navigation>
    </view>
</template>

<script>
import { onLogin, phoneNumber } from '@/config/login';
export default {
    data() {
        return {
            promotetypeList: [
                {
                    name: '收入',//1
                }, {
                    name: '核销',//0
                },
            ],
            indexList: [],
            urls: [
                'https://cdn.uviewui.com/uview/album/1.jpg',
                'https://cdn.uviewui.com/uview/album/2.jpg',
                'https://cdn.uviewui.com/uview/album/3.jpg',
                'https://cdn.uviewui.com/uview/album/4.jpg',
                'https://cdn.uviewui.com/uview/album/5.jpg',
                'https://cdn.uviewui.com/uview/album/6.jpg',
                'https://cdn.uviewui.com/uview/album/7.jpg',
                'https://cdn.uviewui.com/uview/album/8.jpg',
                'https://cdn.uviewui.com/uview/album/9.jpg',
                'https://cdn.uviewui.com/uview/album/10.jpg',
            ],
            preLoadScreen: 1,
            status: 'loadmore',
            form: {
                // mobile: 13214060809
            },
            userInfo: {},
            tixian: '---',
            jine: {},
            Sshow: false,
            recordList: [],
            showTimePick: false,
            srhx: 0,
            //微信的一些信息
            WeChat: {
                session_key: '',
                openId: '',
                mobile: ''
            },
            showscanImg: false,
            qrCodeImg: '',
            mshow: false,//提示
            mcontent: '',
            sjList: [],
            showdizhi: false,
            searchFrom: {

            },
            userInfoDet: {}
        }
    },
    //页面显示
    onShow() {
        // 拿取code
        console.log('返回返回')
        this.getCode()
        // 隐藏原生的tabbar
        uni.hideTabBar();
        this.userInfo = this.$store.state.userInfo ? this.$store.state.userInfo : ''
        if (this.userInfo.userId) {
            //获取提现
            this.gettixian()
            //获取个人信息
            this.getUserInfo()
            //获取推广记录
            this.gettuiguangjilu(this.userInfo.roleName == '水工角色' ? '1' : '0')
            if (this.userInfo.roleName == '水工角色') {
                this.promotetypeList.splice(1, 1)
                this.getShangjiaList()
            }
        }
        wx.login({
            success: (res) => {
                if (res.code) {
                    this.$http.get('getOpenid/' + res.code).then(res1 => {
                        console.log(res1)
                        this.opget = res1
                    }, err => {
                        loginStart = true;
                    });
                } else {
                    console.log('登录失败！' + res.errMsg)
                }
            }
        })
    },

    onLoad() {
        uni.hideTabBar();
        let that = this
        // this.loadmore()
        // return
    },
    methods: {
        // 跳转金额明细
        gotoshopIncome(){

            uni.navigateTo({
                    url: '/pages/shopIncome/shopIncome'
                });
        },
        gotoeditInfo() {
            if (this.userInfo.roleName == '水工角色') {
                uni.navigateTo({
                    url: '/pages/editInfo/editInfo'
                });
            }
        },
        mconfirm() {
            this.mshow = false
        },
        //获取个人信息
        getUserInfo() {
            console.log('获取个人信息')
            this.$http.get('/app/user_info/get_user_info/' + this.userInfo.userId).then(val => {
                this.userInfoDet = val.data
                console.log(this.userInfoDet)

            })
        },
        //认证个人信息
        gotoRenzheng(type) {
            if (!this.userInfo.roleName) {
                this.mshow = true
                this.mcontent = '请先进行登录注册后再认证'
                return
            }
            if (this.userInfo.roleName == '游客角色') {
                uni.navigateTo({
                    url: '/pages/certifiedMember/certifiedMember?type=' + type,
                });
            }

            if (this.userInfo.identityType == '1') {
                uni.navigateTo({
                    url: '/pages/pay/pay',
                });
            }
        },
        //跳转客服
        gotoService() {
            uni.navigateTo({
                url: '/pages/customerService/customerService',
            });
        },
        seeQrCodeImg(item) {
            console.log(item.qrCode);
            if (this.userInfo.roleName == '水工角色' && this.srhx == 0) {
                this.qrCodeImg = item.qrCode
                this.showscanImg = true
            }
        },
        // 拿取code和后台换session_key
        getCode() {
            let _this = this
            uni.login({
                provider: 'weixin',
                success: function (loginRes) {
                    if (loginRes) {

                        _this.$http.get(`getOpenid/${loginRes.code}`).then(infos => {
                            console.log(infos, 'resresresresresresres')
                            if (infos.code === 200) {
                                _this.WeChat.session_key = infos.data.session_key
                                _this.WeChat.openId = infos.data.openid
                            }
                        }, err => {
                            console.log(err);
                        });

                    }
                }
            });
        },
        // 获取手机号登录
        getPhoneNum(e) {
            console.log(e, 'eeeeeeeeeeeeeeee');
            // let _this = this
            if (e.detail.errMsg == 'getPhoneNumber:ok') {


                this.$http.post('phoneNumber', {
                    iv: e.detail.iv,
                    encryptedData: e.detail.encryptedData,
                    session_key: this.WeChat.session_key
                }).then(res => {
                    console.log(123);
                    console.log(res, '获取手机号登录')
                    this.WeChat.mobile = res.data.phoneNumber

                    this.toLogin()
                }, err => {
                    console.log(err);
                });
            }
        },
        toLogin() {
            let that = this
            console.log(this.WeChat, 'WeChat')
            that.$http.post('login', {
                mobile: this.WeChat.mobile
            }).then(val => {
                console.log(val)
                this.$store.commit('setUserInfo', val.data);
                this.$store.commit('setWeChatMobile', this.WeChat.mobile);
                this.userInfo = this.$store.state.userInfo ? this.$store.state.userInfo : ''
                this.getUserInfo()
                this.gettuiguangjilu(this.userInfo.roleName == '水工角色' ? '1' : '0')
                this.gettixian()
            })
        },
        logOut() {
            // uni.removeStorageSync("userInfo");
            this.$store.commit('emptyUserInfo')
            this.$store.commit('setWeChatMobile', '');
            uni.removeStorageSync("weChatMobile");
            this.$store.commit('setUserInfo', {});
            console.log(this.$store.state, 'this.$store.state');
            // this.userInfo = {}
            this.userInfo = {}
            this.jine = {}
            this.recordList = []
            this.userInfoDet = {}
            uni.switchTab({
                url: '/pages/index/index'
            })
        },
        //切换type
        clicktype(e) {
            this.srhx = e.index
            if (e.index == 0) {
                this.gettuiguangjilu('1')
            }
            else {
                this.gettuiguangjilu('0')
            }
            console.log(e)
        },
        //重置
        chongzhiSearch() {
            this.searchFrom = {}
            this.Sshow = false
            this.gettuiguangjilu('1')
        },
        gettuiguangjilu(type) {
            console.log(type)
            this.Sshow = false
            console.log(this.showdizhi)
            this.$forceUpdate()
            let paramsdata = {}
            paramsdata.roleId = this.userInfo.roleId
            paramsdata.userId = this.userInfo.userId
            paramsdata.type = type
            paramsdata = Object.assign(paramsdata, this.searchFrom)
            delete paramsdata.machName
            console.log(paramsdata)
            this.recordList = []
            this.$http.post('/app/tuiguangjilu', paramsdata).then(val => {
                if (val.data) {
                    this.recordList = val.data

                }
                else {
                    this.recordList = []

                }
            })
        },
        //弹出日期选择
        hideKeyboard(key) {
            this.nowkey = key
            uni.hideKeyboard()
        },

        birthdayClose() {
            this.showTimePick = false
            // this.$refs.form1.validateField('userInfo.birthday')
        },
        birthdayConfirm(e) {
            this.showTimePick = false
            this.searchFrom[this.nowkey] = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
            // this.$refs.form1.validateField('userInfo.birthday')
        },
        open() {
            // console.log('open');
        },
        close() {
            this.Sshow = false
            this.showscanImg = false
            // console.log('close');
        },
        //可提现金额
        gettixian() {
            this.$http.get('app/user_info/withdrawal_amount/' + this.userInfo.roleId).then(val => {
                console.log(val)
                this.jine = val.data
            }).catch(err => {

                // if (!this.userInfo.roleName) {
                // this.mshow = true
                // this.mcontent = '账号已过期，请重新登录'
                // return
                // }
                this.$store.commit('emptyUserInfo')
                this.$store.commit('setWeChatMobile', '');
                uni.removeStorageSync("weChatMobile");
                this.$store.commit('setUserInfo', {});
                console.log(this.$store.state, 'this.$store.state');
                this.userInfo = {}
                this.jine = {}
                this.recordList = []
                this.userInfoDet = {}
            })
        },

        scrolltolower() {
            // this.loadmore()
        },
        loadmore() {
            console.log('jiazai')
            this.preLoadScreen++
            if (this.preLoadScreen < 4) this.status = 'loading';
            else {
                this.status = 'nomore'; return
            }
            for (let i = 0; i < 20; i++) {
                this.indexList.push({
                    url: this.urls[uni.$u.random(0, this.urls.length - 1)]
                })
            }
        },
        // 获取用户手机号
        getPhoneNumber(e) {
            // return                             // 参数encryptedData
            if (e.detail.errMsg == "getPhoneNumber:ok") {                // 用户允许或去手机号
                let param = {
                    iv: e.detail.iv,
                    encryptedData: e.detail.encryptedData,
                    // openid:e.detail.openid,
                    session_key: e.detail.session_key,
                }

                that.$http.post('phoneNumber', param).then(res2 => {
                    // this.userInfoBase = res2.data
                    console.log(res2)
                }, err => {
                    loginStart = true;
                });
            }
        },
        chaxun() {
            this.Sshow = true
        },
        //获取商家下拉框
        getShangjiaList() {
            this.$http.get('/app/get_mach_info').then(val => {
                console.log(val)
                this.sjList[0] = val.data
                console.log(this.sjList)
            })
        },

        //选择地址
        confirmSJ(e) {
            this.showdizhi = false
            this.searchFrom.machName = e.value[0].name
            this.searchFrom.machId = e.value[0].id
            console.log(this.searchFrom);
            this.$forceUpdate()
        },
    },
}
</script>

<style lang="scss">
.userIndex {

    // max-height: calc(100vh - 300rpx) !important;
    .bg {
        background-color: $themeColor;
        padding: 40rpx;
        position: relative;

        .userImg {
            position: relative;

            .user_img {
                width: 100rpx;
                height: 100rpx;
                border-radius: 50%;
                margin-right: 30rpx;
                border: 5rpx solid #fff;
            }

            .editUser_img {
                position: absolute;
                bottom: -13rpx;
                left: 35rpx;
                width: 30rpx;
                height: 30rpx;
            }
        }

        .name {
            font-size: 40rpx;
            color: #fff;
            margin-right: 20rpx;
            background-color: transparent;
            position: relative;

            .phoneBtn {
                opacity: 0;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 70rpx;
            }
        }

        .logOut {
            width: 100rpx;
            font-size: 24rpx;
            color: #f8f8f8;
            position: absolute;
            right: 40rpx;
            top: 5rpx;
        }

        .rz_img {
            width: 135rpx;
            height: 70rpx;
            // height: auto;
        }

        .amount {
            width: 50%;
            padding: 50rpx;
            text-align: center;

            view:nth-child(1) {
                font-size: 40rpx;
                color: #fff;
                line-height: 50rpx;
                font-weight: bold;
            }

            view:nth-child(2) {
                font-size: 26rpx;
                color: rgba($color: #fff, $alpha: 0.6);
            }
        }

        .service {
            image {
                width: 80rpx;
                height: 50rpx;
            }

            font-size: 28rpx;
            color: #fff;
        }
    }

    .rzjs_img {
        width: 100%;
        height: 18vw;
        margin-top: 6vh;

        image {
            height: 18vw;
            width: 50%;
        }

        // position: absolute;
    }

    .bottomBox {
        background-color: #fff;
        top: -40rpx;
        border-radius: 30rpx 30rpx 0 0;
        position: relative;
        min-height: calc(100vh - 410rpx);
        padding: 40rpx 32rpx 0 32rpx;

        .promoteBox {
            // padding: 20rpx;
            width: 100%;
            border-radius: 30rpx 30rpx 0 0;
            background-color: #fff;
            box-shadow: 0px 2px 10px 5px rgba(0, 0, 0, 0.05);

            .promoteBoxtop {
                border-bottom: 1rpx #eaeaea solid;

                .searchBox {
                    padding: 24rpx 24rpx 5rpx 24rpx;
                    font-size: 36rpx;
                    color: #333;
                    font-weight: bold;

                    image {
                        margin-left: 22rpx;
                        width: 30rpx;
                        height: 30rpx;
                    }

                    text {
                        font-size: 22rpx;
                        color: #999;
                        padding-left: 4rpx;
                        font-weight: 400;
                    }
                }
            }

            .u-page {
                height: calc(100vh - 48vh) !important;
                // background-color: rosybrown;
                overflow: hidden;

                .uListBox {
                    padding-bottom: 8vh;
                }

                .u-list {
                    height: calc(100vh - 48vh) !important;
                    padding: 0rpx 20rpx 20rpx 20rpx;
                }

                .u-loadmore {
                    padding-bottom: 70rpx !important;
                }

                .recordItem {
                    padding: 20rpx 40rpx;
                    margin-top: 20rpx;
                    border: 2px solid #e9f1fc;
                    border-radius: 10rpx;

                    .dptitle {
                        font-size: 24rpx;
                        color: #555555;
                        line-height: 33rpx;
                        margin-bottom: 10rpx;

                        span {
                            margin-left: 10rpx;
                        }
                    }

                    .title {
                        font-size: 32rpx;
                        font-weight: 600;
                        color: #333333;
                        line-height: 45rpx;
                    }

                    .moneyBox {
                        image {
                            width: 30rpx;
                            height: 30rpx;
                            margin-right: 10rpx;
                        }

                        font-size: 50rpx;
                        font-weight: 600;
                        color: #ff9f16;
                        line-height: 70rpx;

                        .u-icon__icon {
                            font-size: 30rpx !important;
                            font-weight: 6000 !important;
                            color: #ff9f16 !important;
                            line-height: 70rpx !important;
                        }
                    }

                    .time {
                        font-size: 24rpx;
                        color: #666;
                        font-weight: 300;
                        line-height: 33rpx;
                    }
                }
            }
        }

        .u-tabs__wrapper__nav__item,
        .swiper-item {
            width: 100% !important;
        }

        .u-tabs__wrapper__nav__line {
            width: 60rpx !important;
            // width: 100px !important;
            height: 6rpx !important;
            background: $themeColor !important;
            border-radius: 12rpx !important;
        }
    }

    .u-picker__view__column,
    .u-picker__view {
        height: 40vh !important;
    }

    .u-popup__content {
        padding: 40rpx;
    }

    .u-form-item {
        border: none;
    }

    .u-upload__wrap__preview__image,
    .u-upload__button {
        width: 200rpx !important;
        height: 200rpx !important;
    }

    .u-upload__deletable {
        width: 50rpx !important;
        height: 50rpx !important;

        text {
            top: 20rpx !important;
            font-size: 40rpx !important;
        }
    }

    .u-input__content {
        padding: 20rpx;
    }

    .u-border {
        border: none !important;
    }

    .u-line {
        display: none;
    }

    .u-form-item__body__right__message {
        margin-left: 0 !important;
    }

    .u-form-item__body {
        display: block !important;
    }

    .u-input--square,
    .select {
        margin: 0 !important;
        background: #f8f8f8 !important;
        padding: 0 !important;
    }

    .u-form-item__body__left__content__label {
        white-space: nowrap;
        font-size: 36rpx !important;
        font-weight: 600 !important;
        color: #000000 !important;
        line-height: 50rpx !important;
        margin: 20rpx 0 !important;
    }

    .u-input,
    .u-textarea,
    .uni-input {
        margin-top: 20rpx;
        background: #f8f8f8 !important;
        border-radius: 8rpx;
        border: none;
        line-height: 50rpx !important;
        height: 88rpx;

        // padding: 20rpx !important;
    }

    .uni-input {
        // line-height: 26px;
        padding: 0 20rpx;
    }

    .qrCodeImg {
        width: 80vw;
        height: 80vw;
    }

    .buttonbottom {
        margin-top: 100rpx;
    }
}</style>
